<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue组件通讯</title>
</head>
<body>
    <div id="app">
        <html-a text="word"></html-a>
        <html-a :text="message"></html-a>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        //去除警告
        Vue.config.productionTip = false; 
        //局部组件
        // const Compoent = {
        //     data(){
        //         return {
        //             message :'局部组件'
        //         }
        //     },
        //     //   <div>{{text}}{{message}}</div>  {{text}}是父组件传过来的值  {{message}}是子组件本身的值
        //     template:`
        //         <div>{{text}}{{message}}</div>   
        //     `,
        //     props:['text']
        // }
        //  全局组件  全局组件也可以获取根组件 传过来的值  因为全局组件也是根组件的子组件
        Vue.component('html-a',{
            data(){
                return {
                    message :'局部组件'
                }
            },
            //   <div>{{text}}{{message}}</div>  {{text}}是父组件传过来的值  {{message}}是子组件本身的值
            template:`
                <div>{{text}}{{message}}</div>   
            `,
            props:['text']
        });
        //new vue对象本身就是一个组件  即是根组件 也是父组件
        let vue = new Vue({
            el:"#app",
            data:{
                message:'Hello Vue!',
                abc:'abc'
            },
            methods: {
                
            },
            
        })
    </script>
</body>
</html>